import React, { FC } from 'react'
import { NavBar, TabBar, Space, Toast } from 'antd-mobile'
import { Route,Switch,useHistory,useLocation,BrowserRouter as Router } from 'react-router-dom'
import { AppOutline,SearchOutline,UnorderedListOutline,UserOutline} from 'antd-mobile-icons'

import './App.css';
import './css/styles.css';
import MyNav from './views/customize/nav'
import Home from "./views/home";
import Login from "./views/login";
import Reg from "./views/reg";
import List from "./views/list";
import Detail from "./views/detail";
import Mine from "./views/mine";
import Search from "./views/search";
import Add from "./views/add"



const Bottom: FC = () => {
    const history = useHistory();

    const location = useLocation()
    const { pathname } = location

    const setRouteActive = (value: string) => {
        history.push(value)
    }
    const tabs = [
        {
            key: '/',
            title: '首页',
            icon: <AppOutline />,
        },
        {
            key: '/list',
            title: '分类',
            icon: <UnorderedListOutline />,
        },
        {
            key: '/search',
            title: '搜索',
            icon: <SearchOutline />,
        },
        {
            key: '/mine',
            title: '我的',
            icon: <UserOutline />,
        },
    ]
    return (
        <TabBar activeKey={pathname} onChange={value => setRouteActive(value)}>
            {tabs.map(item => (
                <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
            ))}
        </TabBar>
    )
}



function App(props) {
  return (
      <Router initialEntries={['/']}>
          <div className='app'>
              <div className='top'>
                    <MyNav/>
              </div>
              <div className='body'>
                  <Switch>
                      <Route exact path='/'>
                          <Home />
                      </Route>
                      <Route exact path='/list'>
                          <List />
                      </Route>
                      <Route exact path='/mine'>
                          <Mine />
                      </Route>
                      <Route exact path='/search'>
                          <Search />
                      </Route>
                  </Switch>
                  <Switch>
                      <Route exact path='/login'>
                          <Login />
                      </Route>
                      <Route history={props.history} exact path='/reg'>
                          <Reg />
                      </Route>
                      <Route exact path='/detail'>
                          <Detail />
                      </Route>
                      <Route exact path='/add'>
                          <Add />
                      </Route>
                  </Switch>
              </div>
              <div className='bottom'>
                  <Bottom />
              </div>
          </div>


      </Router>
  );
}

export default App;
